<template>
  <div class="device-manager">
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="设备编号：">
          <el-input v-model="innerCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="resultinfo">
      <div class="hearder_botton">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="addResult"
          >新建</el-button
        >
        <el-button type="default" @click="getStrategy">批量操作</el-button>
      </div>
      <DeviceTable
        :tableData="tableData"
        @updataAisle="updataAisle"
        @isPolicy="isPolicy"
        @updataPolicy="updataPolicy"
        v-loading="loading"
      />
      <MyPagination :page="page" :sumIndex="sumIndex" @updateIndex="updateIndex"/>
    </div>
    <AddDevice :addvisible.sync="addvisible" @updataList="getTableInfo" />
    <AisleDialog :aislevisible.sync="aislevisible" :AisleList="AisleList" />
    <StrategyDialog
      ref="StrategyDialog"
      :policyvisible.sync="policyvisible"
      @updataList="getTableInfo"
    />
    <PolicyDialog ref="PolicyDialog" :IsPolicyvisible.sync="IsPolicyvisible" />
    <UpdateDialog ref="UpdateDialog" :updatevisible.sync="updatevisible" />
  </div>
</template>

<script>
import Bus from '@/utils/bus'
import { getVmSearch, getPlicyCode } from '@/api/device-manager'
const AddDevice = () => import('./components/AddDevice.vue')
const UpdateDialog = () => import('./components/UpdateDialog.vue')
const StrategyDialog = () => import('./components/StrategyDialog.vue')
const AisleDialog = () => import('./components/AisleDialog.vue')
const DeviceTable = () => import('./components/DeviceTable.vue')
const PolicyDialog = () => import('./components/PolicyDialog.vue')
export default {
  name: 'DeviceManager',
  components: {
    AddDevice,
    DeviceTable,
    AisleDialog,
    StrategyDialog,
    PolicyDialog,
    UpdateDialog
  },
  data () {
    return {
      tableData: [], // 表格数据
      multipleSelection: [], // 选中的值
      page: {
        pageIndex: 1, // 页数
        pageSize: 10, // 每页数量
        totalCount: 0 // 总数
      },
      innerCode: '', // 售货机编号
      addvisible: false, // 添加对话框
      aislevisible: false, // 货道对话框
      AisleList: {}, // 当前货道详情
      policyvisible: false, // 策略对话框
      Strategylist: [], // 选中售货机数据
      IsPolicyvisible: false, // 是否策略对话框
      updatevisible: false, // 修改对话框
      loading: false
    }
  },
  created () {
    this.getTableInfo()
  },
  mounted () {
    Bus.$on('getpolicy', data => {
      this.Strategylist = data
    })
  },
  computed: {
    // 分页总页数
    sumIndex () {
      return Math.ceil(this.page.totalCount / this.page.pageSize)
    }
  },
  methods: {
    // 获取表格信息
    async getTableInfo () {
      // 获取售货机信息
      this.loading = true
      const { totalCount, currentPageRecords } = await getVmSearch(this.page)
      this.page.totalCount = totalCount
      this.tableData = currentPageRecords
      this.loading = false
    },
    // 搜索
    async onSubmit () {
      const { totalCount, currentPageRecords } = await getVmSearch({ ...this.page, innerCode: this.innerCode })
      this.page.totalCount = totalCount
      this.tableData = currentPageRecords
    },
    // 新增
    addResult () {
      this.addvisible = true
    },
    // 货道
    updataAisle (row) {
      this.AisleList = row
      this.aislevisible = true
    },
    // 分页
    updateIndex (val) {
      this.page.pageIndex += val
      this.getTableInfo()
    },
    // 策略
    getStrategy () {
      if (!this.Strategylist.length) {
        return this.$message({ type: 'warning', message: '请勾选售货机' })
      }
      this.policyvisible = true
    },
    // 是否有策略
    async isPolicy (row) {
      const res = await getPlicyCode(row.innerCode)
      if (res) {
        this.IsPolicyvisible = true
        this.$refs.PolicyDialog.PlicyCode = res
      } else {
        this.$refs.StrategyDialog.form.innerCodeList.push(row.innerCode)
        this.policyvisible = true
      }
    },
    // 修改
    async updataPolicy (row) {
      this.$refs.UpdateDialog.updatePolicyList = row
      this.updatevisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .device-manager {
    .search {
      height: 64px;
      margin-bottom: 20px;
      padding-left: 17px;
      background-color: #fff;
      .el-form {
        padding-top: 12px;
        ::v-deep .el-form-item__label{
        font-weight: normal;
      }
        .el-button--primary {
          background-color: rgb(95, 132, 255);
          border: 0;
        }
      }
    }
    .resultinfo {
      background-color: #fff;
      padding: 20px 15px 19px 17px;
      // 按钮
      .hearder_botton {
        margin-bottom: 20px;
        .el-button--primary {
          background: linear-gradient(135deg, #ff9743, #ff5e20);
          border: 0;
        }
        .el-button--default {
          background-color: #fbf4f0;
          border: 0;
        }
      }
    }
  }
</style>
